<template>
  <div v-if="data !== null" class="box">
    <div class="back" @click="back"><i class="el-icon-back"></i></div>
    <div class="leftImg">
      <el-image :src="data.artist.cover" lazy>
        <div slot="placeholder" class="image-slot">
          <el-image
            :src="require('../../assets/image/hot50.jpg')"
            style="width: 250px; height: 250px"
            lazy
          ></el-image>
        </div>
      </el-image>
    </div>
    <div>
      <div class="name">{{ data.artist.name }}</div>
      <el-button size="medium" type="danger" @click="subscribe()"
        ><i class="el-icon-folder-add"></i>{{ subTest }}</el-button
      >
      <div class="item">
        <div class="musicSize">单曲数:{{ data.artist.musicSize }}</div>
        <div class="albumSize">专辑数:{{ data.artist.albumSize }}</div>
        <div class="mvSize">MV数:{{ data.artist.mvSize }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  mounted() {
    this.id = window.sessionStorage.getItem('artists');
    this.getItem();
    if (localStorage.getItem('cookie') !== null) {
      this.ifSub();
    }
  },
  computed: {
    ...mapState(['resArtists', 'cookie']),
  },
  watch: {
    resArtists(newVal, oldVal) {
      this.id = newVal.resArtists;
      this.getItem();
    },
    cookie(newVal, oldVal) {
      this.ifSub();
    },
  },
  data() {
    return {
      id: '',
      data: null,
      ifSubList: null, // 已经收藏歌手的名单
      subTest: '收藏',
    };
  },
  methods: {
    ...mapActions(['saveArtistsItem']),
    async getItem() {
      this.data = null;
      this.$api.arDetail({ id: this.id, cookie: localStorage.getItem('cookie') }).then((ret) => {
        this.saveArtistsItem({ artistsItem: ret.data });
        this.data = ret.data;
      });
    },
    // 收藏
    subscribe() {
      if (localStorage.getItem('cookie') !== null) {
        if (this.subTest === '收藏') {
          this.getSub(1);
        } else {
          this.getSub(2);
        }
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 收藏的请求
    // t类型1是收藏  2是取消收藏
    async getSub(e) {
      const cookie = localStorage.getItem('cookie');
      this.$api.subArt({ id: this.id, cookie, t: e }).then((ret) => {
        if (ret.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
          });
          if (e === 1) {
            this.count += 1;
          } else {
            this.count -= 1;
          }
          this.ifSub();
        } else if (ret.code !== 200) {
          this.$message.error('操作失败');
        }
      });
    },

    // 判断是否收藏
    async ifSub() {
      this.ifSubList = null;
      this.$api
        .subArList({
          cookie: localStorage.getItem('cookie'),
          timestamp: this.$utils.timestamp(),
        })
        .then((ret) => {
          this.ifSubList = ret.data;
          for (let i = 0; i < this.ifSubList.length; i++) {
            if (this.ifSubList[i].id === parseInt(this.id)) {
              this.subTest = '取消收藏';
              break;
            } else {
              this.subTest = '收藏';
            }
          }
        });
    },

    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  position: relative;
}
.leftImg {
  width: 250px;
  height: 250px;
  margin-right: 20px;
  margin-left: 30px;
}

.back {
  position: absolute;
  font-size: 30px;
  left: 0;
  top: 0;
}

.el-image {
  border-radius: 5px;
}

.name {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
}

.el-button {
  border-radius: 20px;
  margin-bottom: 10px;
}

.item {
  display: flex;
}

.musicSize {
  margin-right: 10px;
}

.albumSize {
  margin-right: 10px;
}
</style>
